import React, {PureComponent} from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Table, Card, Icon, Button, Divider} from 'antd';
import {PAGE, TABLE, PAGINATION_OPTIONS, COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT} from '../constants';
import {conventSorter} from '../utils';
import TextInput from 'Shared/components/TextInput';
import styles from './style.css';
import {getList} from './api';
class DetailPanel extends PureComponent {
    state = {
        partCode: '',
        partName: '',
        isFetching: false,
        data: {},
        message: '',
        pageIndex: PAGE.index,
        pageSize: PAGE.smallSize,
        sortField: 'partCode',
        isDesc: false,
        currentCondition: {}
    };
    componentDidMount() {
        this.onClickSearchBtn();
    }
    handleTableChange = (pagination, filters, sorter) => {
        const oldCondition = this.state.currentCondition;

        if(pagination.current - 1 === oldCondition.pageIndex && pagination.pageSize === oldCondition.pageSize) {
            const sortOptions = conventSorter(sorter);
            const condition = Object.assign({}, oldCondition, sortOptions, {
                pageIndex: PAGE.index
            });
            this.onQuery(condition);
            this.setState({
                sortField: sortOptions.sortField,
                isDesc: sortOptions.isDesc
            });
        }
    };
    handleFilterPressEnter = (value, name) => {
        this.setState({
            [name]: value
        }, this.onClickSearchBtn);
    };
    getColumnSearchProps = dataIndex => ({
        filterDropdown: () => (
            <div>
                <TextInput
                    name={dataIndex}
                    onBlur={this.onChange}
                    value={this.state[dataIndex]}
                    onPressEnter={this.handleFilterPressEnter}
                    className={styles.filterInput} />
                <Button
                    type="primary"
                    onClick={this.onClickSearchBtn}
                    icon="search"
                    size="small"
                    className={styles.filterQueryBtn}>
                    {this.props.intl.formatMessage({
                        id: 'editPanel.filterBtn.query',
                        defaultMessage: '查询'
                    })}
                </Button>
                <Button
                    data-name={dataIndex}
                    onClick={this.onClearFilter}
                    size="small"
                    className={styles.filterResetBtn}>
                    {this.props.intl.formatMessage({
                        id: 'editPanel.filterBtn.reset',
                        defaultMessage: '重置'
                    })}
                </Button>
            </div>
        ),
        filterIcon: () => <Icon type="filter" theme="filled" className={this.state[dataIndex] ? styles.iconColor : ''} />,
    })
    onQuery = condition => {
        this.setState({
            isFetching: true
        });
        getList(this.props.id, condition).then(res => {
            if(res.ok)
                this.setState({
                    isFetching: false,
                    message: '',
                    data: res.data,
                    currentCondition: condition
                });
            else
                this.setState({
                    isFetching: false,
                    data: [],
                    message: res.message
                });
        });
    };
    onClickSearchBtn = () => {
        const condition = {
            partCode: this.state.partCode,
            partName: this.state.partName,
            pageIndex: PAGE.index,
            pageSize: this.state.pageSize,
            sortField: this.state.sortField,
            isDesc: this.state.isDesc
        };
        this.onQuery(condition);
    };
    onPageIndexChange = current => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = current - 1;
        this.onQuery(condition);
    };
    onPageSizeChange = (current, pageSize) => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = PAGE.index;
        condition.pageSize = pageSize;
        this.onQuery(condition);
        this.setState({
            pageSize
        });
    };
    onChange = (value, name) => {
        this.setState({
            [name]: value
        });
    };

    onClearFilter = e => {
        const {name} = e.target.dataset;
        this.setState({
            [name]: '',
            pageIndex: PAGE.index,
        }, this.onClickSearchBtn);
    }
    render() {
        const {isFetching, data, message} = this.state;
        const {pageIndex, pageSize} = this.state.currentCondition;
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'detailPanel.partCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'partCode',
                sorter: true,
                ...this.getColumnSearchProps('partCode')
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'detailPanel.partName',
                    defaultMessage: '备件名称'
                }),
                dataIndex: 'partName',
                ...this.getColumnSearchProps('partName')
            },
        ];
        const pagination = {
            total: data.totalElements,
            current: pageIndex + 1,
            pageSize,
            onShowSizeChange: this.onPageSizeChange,
            onChange: this.onPageIndexChange,
            ...PAGINATION_OPTIONS
        };
        return (
            <Card title={this.props.intl.formatMessage({
                id: 'detailPanel.card.title',
                defaultMessage: '不可提报备件清单'
            })}>
                <Table
                    className={`white-space-nowrap ${styles.tableCursor}`}
                    rowKey="partId"
                    dataSource={data.content}
                    columns={columns}
                    loading={isFetching}
                    pagination={pagination}
                    onChange={this.handleTableChange}
                    {...TABLE}
                    locale={{
                        emptyText: message ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                    }} />
                
            </Card>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string,
    intl: PropTypes.object,
};

export default injectIntl(DetailPanel);
